<div
    class="documents-library"
    v-loading="loading"
    :element-loading-text="$t('app.directoryTree.loading')"
    element-loading-spinner="el-icon-loading">
    <div class="documents-library-operation">
        <Breadcrumb separator=">">
            <template v-for="(item,index) in breadcrumbs">
                <BreadcrumbItem :key="index">
                    <Icon v-if="index === 0" @click="handleLink(item)" type="md-folder" size="25" color="rgb(255, 202, 40)" />
                    <a v-else-if="index < breadcrumbs.length-1" @click="handleLink(item)" >{{ item.text }}</a>
                    <span v-else >{{ item.text }}</span>
                </BreadcrumbItem>
            </template>
        </Breadcrumb>
        <div class="documents-library-toolbar">
            <div class="documents-library-search">
                <i-input size="small" v-model="srfnodefilter" clearable search @on-search="onSearch.apply(_self, arguments)" :placeholder="$t('app.directoryTree.placeholder')"></i-input>
            </div>
            <div class="documents-library-button">
                <ButtonGroup size="small">
                    <Button icon="md-apps" :class="Object.is(mode,'chart') ? 'button-active-background' : ''" @click="modeChange('chart')"></Button>
                    <Button icon="md-menu" :class="Object.is(mode,'list') ? 'button-active-background' : ''" @click="modeChange('list')"></Button>
                </ButtonGroup>
            </div>  
        </div>
    </div>
    <div v-if="Object.is(mode, 'chart')" class="documents-library-chart" >
        <template v-for="(item,index) in curPageItems">
            <div :key="index" class="chart-item" @mouseleave="hideToolBar(index)" @mouseenter="showToolBar(item,index)">
                <div
                    v-if="Object.is(item.nodeType,'STATIC') || (item.curData && (Object.is(item.curData.doclibtype,'doc') || Object.is(item.curData.docqtype,'module')))"
                    @dblclick="openNode(item)">
                    <Icon type="md-folder" size="70" color="rgb(255, 202, 40)" />
                </div> 
                <div 
                    v-if="item.curData && (Object.is(item.curData.doclibtype,'file') || Object.is(item.curData.docqtype,'doc'))"> 
                    <Icon v-if="!item.curData.pathname" type="md-document" size="70" color="darkgrey" />
                    <img v-else style="width: 70px;height: 70px;" :src="downloadUrl+'/'+item.curData.id" onerror="this.src='/assets/img/noimage.png'"/>
                </div>
                <div class="text-description">
                    <a
                        v-if="Object.is(item.nodeType,'STATIC') || (item.curData && (Object.is(item.curData.doclibtype,'doc') || Object.is(item.curData.docqtype,'module')))" 
                        @click="openNode(item)">
                        <span>{{ item.text }}</span>
                    </a>
                    <span v-if="item.curData && (Object.is(item.curData.doclibtype,'file') || Object.is(item.curData.docqtype,'doc'))">
                        {{ item.text }}
                    </span>
                </div>
                <div class="chart-item-operate">
                    <div v-if="item.curData && item.curData.copyActionModel">
                        <a 
                            v-for="(actionModel,i) in item.curData.copyActionModel"
                            :key="i"
                            class="chart-item-action" 
                            @click="onAction(item,actionModel.ctrlname,actionModel.name)" 
                            v-show="actionModel.visible"
                            :disabled="actionModel.disabled">
                            <i :title="$t(actionModel.title)" v-if="actionModel.imgclass" :class="actionModel.imgclass"></i>
                            <span>{{ actionModel.caption }}</span>
                        </a>
                    </div>
                </div>
            </div>
        </template>
    </div>
    <div v-if="Object.is(mode, 'list')" class="documents-library-list">
        <template v-for="(item,index) in curPageItems">
            <div :key="index" class="list-item">
                <div>
                    <span
                        v-if="Object.is(item.nodeType,'STATIC') || (item.curData && (Object.is(item.curData.doclibtype,'doc') || Object.is(item.curData.docqtype,'module')))"
                        @click="openNode(item)">
                        <Icon type="md-folder" color="rgb(255, 202, 40)" size="20" /><a>{{ item.text }}</a>
                    </span>
                    <span v-if="item.curData && (Object.is(item.curData.doclibtype,'file') || Object.is(item.curData.docqtype,'doc'))">
                        <Icon type="md-document" color="darkgrey" size="20" />{{ item.text }}
                    </span>
                </div>
                <div v-if="item.curData && item.curData.copyActionModel">
                    <a 
                        v-for="(actionModel,i) in item.curData.copyActionModel"
                        :key="i"
                        class="list-item-action" 
                        @click="onAction(item,actionModel.ctrlname,actionModel.name)" 
                        v-show="actionModel.visible"
                        :disabled="actionModel.disabled">
                        <i :title="$t(actionModel.title)" v-if="actionModel.imgclass" :class="actionModel.imgclass"></i>
                        <span>{{ actionModel.caption }}</span>
                    </a>
                </div>
            </div>
        </template>
    </div>
    <div class="documents-library-no-data" v-if="items.length == 0">
        <span>
            {{ $t('app.directoryTree.noData') }}
        </span>
    </div>
    <row class="pagination" v-show="items.length > 0">
        <page class="pull-right" @on-change="pageOnChange($event)" 
            @on-page-size-change="onPageSizeChange($event)"
            :total="totalRecord"
            show-sizer :current="curPage" :page-size="limit"
            :page-size-opts="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]" show-elevator show-total>
            <span>
                <span class="page-button"><i-button icon="md-refresh" :title="$t('app.gridpage.refresh')" @click="pageRefresh()"></i-button></span>&nbsp;
                <span>
                    {{$t('app.gridpage.show')}}&nbsp;
                    <span>
                        <template v-if="items.length === 1">
                        1
                        </template>
                        <template v-else>
                            <span>{{(curPage - 1) * limit + 1}}&nbsp;-&nbsp;{{totalRecord > curPage * limit ? curPage * limit : totalRecord}}</span>
                        </template>
                    </span>&nbsp;
                    {{$t('app.gridpage.records')}}，{{$t('app.gridpage.totle')}}&nbsp;{{totalRecord}}&nbsp;{{$t('app.gridpage.records')}}
                </span>
            </span>
        </page>
    </row>
</div>